<template>
  <div class="sensitive-word-container">
    <h2>敏感词管理</h2>
    <el-row :gutter="10" style="margin-bottom: 20px;">
      <el-col :span="6">
        <el-input v-model="searchWord" placeholder="请输入敏感词" clearable />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-col>
      <el-col :span="14" style="text-align: right">
        <el-button type="primary" @click="openAddDialog">新增敏感词</el-button>
      </el-col>
    </el-row>

    <el-table :data="sensitiveWords" border stripe style="width: 100%">
      <el-table-column prop="word" label="敏感词" />
      <el-table-column prop="status" label="状态" width="160">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'info'">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="260" />
      <el-table-column prop="updateTime" label="更新时间" width="260" />
      <el-table-column label="操作" width="160">
        <template #default="{ row }">
          <el-button size="small" @click="editWord(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteWord(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        style="margin-top: 20px; text-align: right"
        layout="prev, pager, next"
        :total="total"
    />

    <!-- 弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="30%">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="敏感词" prop="word">
          <el-input v-model="form.word" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button @click="saveWord" type="primary">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import api from '../api/sensitiveWord'

const sensitiveWords = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const searchWord = ref('')

const dialogVisible = ref(false)
const form = ref({ id: null, word: '', status: 1 })
const dialogTitle = ref('')
const formRef = ref(null)

const rules = {
  word: [
    { required: true, message: '请输入敏感词', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在1到50个字符', trigger: 'blur' }
  ]
}

const fetchList = async () => {
  try {
    const res = await api.list(pageNum.value, pageSize.value, searchWord.value)
    console.log('接口返回：', res) // 查看完整返回
    console.log('records 数据：', res.data.data.records) // 确认数据是否真的存在
    sensitiveWords.value = res.data.data.records
    total.value = res.data.data.total
  } catch (error) {
    console.error('获取失败：', error)
  }
}

// 监听分页变化并刷新数据
watch(() => pageNum.value, () => {
  fetchList()
})

// 监听 pageSize 变化（可选）
watch(() => pageSize.value, () => {
  pageNum.value = 1
  fetchList()
})

const openAddDialog = () => {
  form.value = { id: null, word: '', status: 1 }
  dialogTitle.value = '新增敏感词'
  dialogVisible.value = true
}

const editWord = (row) => {
  form.value = { ...row }
  dialogTitle.value = '编辑敏感词'
  dialogVisible.value = true
}

const deleteWord = async (row) => {
  await api.remove({ word: row.word })
  await fetchList()
}

const saveWord = async () => {
  if (form.value.id) {
    // 更新
    await api.update(form.value)
  } else {
    // 新增
    await api.add(form.value)
  }
  dialogVisible.value = false
  await fetchList()
}

const search = () => {
  pageNum.value = 1
  fetchList()
}

const reset = () => {
  searchWord.value = ''
  fetchList()
}

// 初始化加载数据
fetchList()
</script>

<style scoped>
.sensitive-word-container {
  padding: 20px;
}
</style>
